<template>
    <div>
      <el-form ref="form" :model="form" label-width="80px" :inline="false">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">{{ isEdit ? '更新' : '创建' }}</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-table :data="pagedData" style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
      <el-dialog :title="isEdit ? '编辑用户信息' : '添加新用户'" :visible.sync="dialogVisible">
        <el-form ref="form" :model="form" label-width="80px" :inline="false">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import apis from '../api/users'
  
  export default {
    data() {
      return {
        form: { name: '', phone: '', email: '', address: '' },
        tableData: [],
        pagedData: [],
        isEdit: false,
        currentPage: 1,
        pageSize: 2,
        total: 0,
        dialogVisible: false,
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        apis.getAll().then(response => {
            let data = response.data;
            ///console.log(data)
            if (!Array.isArray(data)) {
              console.log('加载的数据不是数组类型');
              return;
            }
            this.tableData = Array.from(data, item => {
            return {
                ...item,
                createTime: item.createTime ? new Date(item.createTime) : null,
                updateTime: item.updateTime ? new Date(item.updateTime) : null
                }
            });
            //console.log(this.tableData.config.data)
            //this.tableData = data;
            this.total = this.tableData.length
            this.updatePagedData()
        }).catch(error => {
          console.error('加载数据失败:', error)
        })

      },
      submitForm() {
        if (this.isEdit) {
          apis.update(this.form.id, this.form).then(response => {
            console.log(response)
            this.loadData()
          }).catch(error => {
            console.log(error)
          })
        } else {
          apis.create(this.form).then(response => {
            console.log(response)
            this.loadData()
          }).catch(error => {
            console.log(error)
          })
        }
        this.resetForm()
      },
      resetForm() {
        this.$refs['form'].resetFields()
        this.isEdit = false
      },
      handlePageChange(currentPage) {
        this.currentPage = currentPage
        this.updatePagedData()
      },
      handleEdit(row) {
        this.form.id = row.id
        this.form.name = row.name
        this.form.phone = row.phone
        this.form.email = row.email
        this.form.address = row.address
        this.isEdit = true
        this.dialogVisible = true
      },
      handleDelete(row) {
        if (confirm(`确定要删除 ${row.name} 吗？`)) {
          apis.delete(row.id).then(response => {
            console.log(response)
            this.loadData()
          }).catch(error => {
            console.log(error)
          })
        }
      },
      updatePagedData() {
        if (!Array.isArray(this.tableData)) {
            console.log('tableData不是数组类型');
            return;
        }
        const beginIndex = (this.currentPage - 1) * this.pageSize
        this.pagedData = Array.from(this.tableData.slice(beginIndex, beginIndex + this.pageSize), item => {
        return {
            ...item,
             createTime: item.createTime ? new Date(item.createTime) : null,
             updateTime: item.updateTime ? new Date(item.updateTime) : null
            }
        })
      },
      confirm() {
        this.submitForm()
        this.dialogVisible = false
      }
    }
  }
  </script>
  